import React from "react";
import { Scrollbars } from "react-custom-scrollbars";
// import HIVChart from "./charts/hivChart";
// import BillChart from "./charts/billChart";
// import DoubanMovieChart from "./charts/doubanMovieChart";
// import WeiboChart from "./charts/weiboChart";
// import MusicChart from "./charts/musicChart";
// import NationalDataChart from "./charts/nationalDataChart";
// import SarsChart from "./charts/sarsChart";

// import User from "./user/user";

import "react-grid-layout/css/styles.css";
import "react-resizable/css/styles.css";
import Loadable from "../../loadable";

const BillChart = Loadable({
  loader: () => import("./charts/billChart"),
});
const ComputerChart = Loadable({
  loader: () => import("./charts/computerChart"),
});
const DoubanMovieChart = Loadable({
  loader: () => import("./charts/doubanMovieChart"),
});
const WeiboChart = Loadable({
  loader: () => import("./charts/weiboChart"),
});
const MusicChart = Loadable({
  loader: () => import("./charts/musicChart"),
});
const NationalDataChart = Loadable({
  loader: () => import("./charts/nationalDataChart"),
});
const User = Loadable({
  loader: () => import("./user/user"),
});
const HIVChart = Loadable({
  loader: () => import("./charts/hivChart"),
});
const SarsChart = Loadable({
  loader: () => import("./charts/sarsChart"),
});

const renderRightChart = (chart) => {
  switch (chart) {
    case "sub1-1": {
      return <BillChart key="week" type="week" />;
    }
    case "sub1-2": {
      return <BillChart key="month" type="month" />;
    }
    case "sub1-3": {
      return <BillChart key="year" type="year" />;
    }
    case "sub2-1": {
      return <DoubanMovieChart />;
    }
    case "sub2-2": {
      return <WeiboChart />;
    }
    case "sub2-3": {
      return <MusicChart />;
    }
    case "sub4-1": {
      return <NationalDataChart key="gdp" type="gdp" />;
    }
    case "sub4-2": {
      return <NationalDataChart key="gdpi" type="gdpi" />;
    }
    case "sub4-3": {
      return <NationalDataChart key="ec" type="ec" />;
    }
    case "sub4-4": {
      return <NationalDataChart key="tic" type="tic" />;
    }
    case "sub4-5": {
      return <NationalDataChart key="ticr" type="ticr" />;
    }
    case "sub4-6": {
      return <NationalDataChart key="tp" type="tp" />;
    }
    case "sub4-7": {
      return <NationalDataChart key="bdr" type="bdr" />;
    }
    case "sub4-8": {
      return <NationalDataChart key="workforce" type="workforce" />;
    }
    case "sub4-9": {
      return <NationalDataChart key="clr" type="clr" />;
    }
    case "sub3-1": {
      return <HIVChart key="hiv" />;
    }
    case "sub3-1": {
      return <HIVChart key="hiv" />
    }
    case "sub3-2": {
      return <SarsChart key="sars" />
    }
    case "user" : {
      return <User key="user" />
    }
    default: {
      return <BillChart key="week" type="week" />;
    }
  }
};

const LeftMenu = (props) => {
  let chart = props.match.params.chart;
  return (
    <Scrollbars style={{ height: "calc(100vh - 70px)" }} autoHide className="main-wrapper">
      {renderRightChart(chart)}
    </Scrollbars>
  );
};

export default LeftMenu;
